<script setup>
import { useUserStore } from '@/stores/user'

defineOptions({
  name: 'mineJumbotron'
})
const userStore = useUserStore()
userStore.setUserInfo()
</script>

<template>
  <div class="thumb">
    <img :src="userStore.userInfo.avatar_url" width="50" height="50" alt="" />
    <div class="intro">
      <div class="my-2">昵&ensp;&ensp;称：{{ userStore.userInfo.name }}</div>
      <div class="my-2">登陆名：{{ userStore.userInfo.email }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.thumb {
  display: flex;
  align-items: center;
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.547) 60%,
    lightgray
  );
  padding: 30px;
  img {
    border-radius: 50%;
    border: 1px solid white;
  }
  .intro {
    margin: 0px 20px;
    color: white;
  }
}
</style>
